<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>婚纱首页</title>
    <link rel="stylesheet" href="css/resrt.css">
    <link rel="stylesheet" href="css/index.css">
    <!-- <link rel="stylesheet" href="css/common.css"> -->
    <link rel="stylesheet" href="css/index-m.css">
    <!-- 引入样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.js">
    </script>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/common-m.css">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.2.1.min.js"></script>
    <script></script>
    <!-- 引入组件库 -->


</head>

<body>
    <!-- 头部 -->
    <div class="head-t">
        <div class="header">
            <div class="header-c">
                <nav class="header-nav">
                    <a href="#" class="logo">
                        <img src="http://bufantec.com/site/hunsha/static/img/logo-1.png" alt="">
                        <img class="logo-num" src="http://bufantec.com/site/hunsha/static/img/logo-2.png" alt="">
                    </a>
                    <ul class="nav-list">
                        <li class="nav-item active">
                            <a href="./index.html">首页</a>
                        </li>
                        <li class="nav-item">
                            <a href="./Weeding Dress.html">婚纱礼服</a>
                        </li>
                        <li class="nav-item">
                            <a href="./Jewelry Show.html">珠宝配饰</a>
                        </li>
                        <li class="nav-item">
                            <a href="./new active.html">最新活动</a>
                        </li>
                        <li class="nav-item">
                            <a href="./about.html">关于我们</a>
                        </li>
                    </ul>
                    <div class="box">
                        <div class="line">
                        </div>
                        <div class="line">
                        </div>
                        <div class="line">
                        </div>
                    </div>
                </nav>
            </div>

        </div>
    </div>
    <div class="container  " id="header">
        <div class="home-button">
            <div class="home-swiper-button swiper-button-next"></div>
            <div class="home-swiper-button swiper-button-prev"></div>
        </div>
        <div class="banner home-banner swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide banner-one"><img src="http://www.bufantec.com/site/hunsha/static/img/banner2.jpg" alt=""></div>
                <div class="swiper-slide"><img src="http://www.bufantec.com/site/hunsha/static/img/banner1.jpg" alt=""></div>
            </div>
            <ul class="swiper-pagination dotts-pagination">
                <li class="first dots"></li>
                <li class="second"></li>
            </ul>
        </div>

        <div class="weeding-dress">
            <div class="weeding-dress-c">
                <span class="ch">婚纱礼服</span>
                <span class="en">Weeding Dress</span>
                <div class="swiper-model">
                    <ul class="dress-show custom-pagination">
                        <li class="dress-show-item show">
                            <a href="javascript:;">新品/NEW</a>
                        </li>
                        <li class="dress-show-item">
                            <a href="javascript:;">2020春夏</a>
                        </li>
                        <li class="dress-show-item">
                            <a href="javascript:;">2020秋冬</a>
                        </li>
                        <li class="dress-show-item">
                            <a href="javascript:;">专属定制</a>
                        </li>
                    </ul>
                    <div class="model-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="shows">

                                    <div class="model-show clearfix">
                                        <div class="model">
                                            <a href=""> <img src="img/婚纱礼服1.png" alt=""></a>
                                            <div class="mask">
                                                <p class="mask-style">HER STYLE / 一字肩拖尾主纱</p>
                                                <p class="mask-price"> $5389.00</p>
                                                <p class="mask-size">白色 / M / VK2531</p>
                                            </div>
                                        </div>
                                        <div class="model">
                                            <a href=""> <img src="img/婚纱礼服2.png" alt=""></a>
                                        </div>
                                        <div class="model">
                                            <a href=""> <img src="img/婚纱礼服3.png" alt=""></a>
                                        </div>
                                        <div class="model">
                                            <a href=""> <img src="img/婚纱礼服4.png" alt=""></a>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="shows">
                                    <div class="model-show">
                                        <div class="model">
                                            <a href=""> <img src="img/婚纱礼服1.png" alt=""></a>
                                            <div class="mask">
                                                <p class="mask-style">HER STYLE / 一字肩拖尾主纱</p>
                                                <p class="mask-price"> $5389.00</p>
                                                <p class="mask-size">白色 / M / VK2531</p>
                                            </div>
                                        </div>
                                        <div class="model">
                                            <a href=""> <img src="img/婚纱礼服2.png" alt=""></a>
                                        </div>
                                        <div class="model">
                                            <a href=""> <img src="img/婚纱礼服3.png" alt=""></a>
                                        </div>
                                        <div class="model">
                                            <a href=""> <img src="img/婚纱礼服4.png" alt=""></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="shows">
                                    <div class="model-show">
                                        <div class="model">
                                            <a href=""> <img src="img/婚纱礼服1.png" alt=""></a>
                                            <div class="mask">
                                                <p class="mask-style">HER STYLE / 一字肩拖尾主纱</p>
                                                <p class="mask-price"> $5389.00</p>
                                                <p class="mask-size">白色 / M / VK2531</p>
                                            </div>
                                        </div>
                                        <div class="model">
                                            <a href=""> <img src="img/婚纱礼服2.png" alt=""></a>
                                        </div>
                                        <div class="model">
                                            <a href=""> <img src="img/婚纱礼服3.png" alt=""></a>
                                        </div>
                                        <div class="model">
                                            <a href=""> <img src="img/婚纱礼服4.png" alt=""></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="shows">
                                    <div class="model-show">
                                        <div class="model">
                                            <a href=""> <img src="img/婚纱礼服1.png" alt=""></a>
                                            <div class="mask">
                                                <p class="mask-style">HER STYLE / 一字肩拖尾主纱</p>
                                                <p class="mask-price"> $5389.00</p>
                                                <p class="mask-size">白色 / M / VK2531</p>
                                            </div>
                                        </div>
                                        <div class="model">
                                            <a href=""> <img src="img/婚纱礼服2.png" alt=""></a>
                                        </div>
                                        <div class="model">
                                            <a href=""> <img src="img/婚纱礼服3.png" alt=""></a>
                                        </div>
                                        <div class="model">
                                            <a href=""> <img src="img/婚纱礼服4.png" alt=""></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="more"> MORE</div>
            </div>

            <!-- 珠宝配饰 -->

        </div>
        <div class="je-show">
            <div class="je-show-c">
                <span class="ch">珠宝配饰</span>
                <span class="en">Jewelry Show</span>
                <div class="list">
                    <ul class="list-nav">
                        <li class=" list-nav-item">
                            <a href=""><img src="img/珠宝1.png" alt=""></a>
                            <div class="hidden">
                                <p class="hidden-t">传世之作，经典重现</p>
                                <p class="hidden-b">维罗尼卡倾情呈现“斑斓之境”（The ...</p>
                            </div>
                        </li>
                        <li class="list-nav-item">
                            <a href=""><img src="img/珠宝2.png" alt=""></a>
                        </li>
                        <li class="list-nav-item">
                            <a href=""><img src="img/珠宝3.png" alt=""></a>
                        </li>
                        <li class="list-nav-item">
                            <a href=""><img src="img/珠宝4.png" alt=""></a>
                        </li>
                    </ul>
                    <div class="js-more"> MORE</div>
                </div>
            </div>
        </div>
        <!-- 最新活动 -->
        <div class="act">
            <div class="act-c">
                <span class="ch">最新活动</span>
                <span class="en">Latest Activities</span>
                <ul class="act-nav">
                    <li class="act-nav-item">
                        <span class="date">06-18 </span>
                        <span class="dete-item">2018</span>
                        <p class="news">新品发布会</p>
                        <p class="act-t">伴随着T台两侧色彩趋势报告的发布，<br>VERONICA2017婚纱新品发布会正...</p>
                        <p class="act-more">MORE&gt;</p>
                    </li>
                    <li class="act-nav-item">
                        <a href="">
                            <img src="img/活动小图.png" alt="">
                        </a>
                    </li>
                    <li class="act-nav-item">
                        <span class="date">12-24</span>
                        <span class="dete-item">2017</span>
                        <p class="news">圣诞高级定制发布会</p>
                        <p class="act-t">《金字塔铭文》有这样的话：“天空<br>把自己的光芒伸向你，以便你可以去到...</p>
                        <p class="act-more">MORE&gt;</p>
                    </li>
                    <li class="act-nav-item">
                        <span class="date">06-21 </span>
                        <span class="dete-item">2017</span>
                        <p class="news">夏季新品发布会</p>
                        <p class="act-t">“我非常欣赏并且热爱美国。因为<br>这里是我获得成功的地方。在许..</p>
                        <p class="act-more">MORE&gt;</p>
                    </li>
                </ul>
                <div class="bt-more">MORE</div>
            </div>
        </div>
        <!-- 设计师 -->
        <div class="des">
            <div class="des-c">
                <span class="ch">设计师</span>
                <span class="en">Designers</span>
                <ul class="des-c-nav">
                    <li class="des-c-nav-item">
                        <img src="img/设计师1.png" alt="">
                        <span class="name">Jason . W</span>
                        <span class="level">首席设计师</span>
                        <span class="experience">法国时装设计师VERONICA品牌创始人之一，设计<br>总监,2016福布斯最具影响力的设计师...</span>
                        <span class="des-more">  <a href="">  MORE</a></span>
                        <span class="des-line"></span>
                    </li>
                    <li class="des-c-nav-item">
                        <img src="img/设计师2.png" alt="">
                        <span class="name">颜澈</span>
                        <span class="level">资深设计师</span>
                        <span class="experience">设计界的“设计鬼才”从题材表现方式都引起了极大<br>的福布斯中国最具潜力，每一个产品都是我们精...

                    </span>
                        <span class="des-more"><a href="">  MORE</a></span>
                        <span class="des-line"></span>
                    </li>
                    <li class="des-c-nav-item">
                        <img src="img/设计师3.png" alt="">
                        <span class="name">Katherine .J</span>
                        <span class="level">运营总监</span>
                        <span class="experience"> The world's leading electronic design journal<br>NEWWEBPICK recommended the designer...</span>
                        <span class="des-more"><a href="">  MORE</a></span>
                        <span class="des-line"></span>
                    </li>
                </ul>
            </div>
        </div>
        <!-- footer -->
        <div class="footer">
            <div class="footer-c">
                <div class="record">
                    <p>网站备案号：豫ICP备110121210号</p>
                    <p>增值电信业务经营许可证号：豫B2-20100033</p>
                </div>
                <div class="join">
                    <div class="join-item copyright">
                        © 2018 VERONICA
                    </div>
                    <a href="./static/pages/about/index.html" class="join-item chat">
    联系我们
  </a>
                    <a href="./static/pages/about/index.html" class="join-item join-us">
    加入我们
  </a>
                </div>
                <div class="toup">
                    <a class="toup-icon" href="#header"></a>
                    <a class="phone-icon" href="tel:17777777777"></a>
                </div>
            </div>
        </div>
    </div>

    <!-- 轮播图 -->
    <!-- <div class="banner">
        <img src="img/箭头.png" alt="">
        <div class="banner-c">
            <ul class="dot">
                <li class="dot-item"></li>
                <li class="dot-item"></li>
            </ul>
        </div>
    </div> -->





</body>
<script src="/js/index.js"></script>
<script>
    var mySwiper = new Swiper('.model-container',

        {
            //  循环模式
            loop: true,

            pagination: {
                // 自定义分页器的类名----必填项
                el: '.custom-pagination',

                // 是否可点击----必填项
                clickable: true,

                // 分页的类型是自定义的----必填项
                type: 'custom',

                // 自定义特殊类型分页器，当分页器类型设置为自定义时可用。
                renderCustom: function(swiper, current, total) {
                    //   console.log(current);//1 2 3 4

                    // 1、分页器激活样式的改变---给自己添加激活样式并将兄弟的激活样式移出。
                    $('.custom-pagination').children().eq(current - 1).addClass('show').siblings().removeClass('show');

                    // 2、分页器点击的时候同时切换轮播图(事件委托)----循环模式slideToLoop--
                    $('.custom-pagination').on('click', 'li', function() {
                        console.log(222)
                        mySwiper.slideToLoop($(this).index(), 1000, true)
                    })
                }
            },
        })
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        // autoplay: true,
        pagination: {
            // el: '.swiper-pagination',
            // clickable: true,

        },
        // navigation: {
        //     nextEl: '.swiper-button-next',
        //     prevEl: '.swiper-button-prev',
        // },



    });
    var swiperBanner = new Swiper('.home-banner', {
        slidesPerView: 1,
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        autoplay: {
            delay: 6000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
        },
        spaceBetween: 30,
        loop: true,
        pagination: {
            clickable: true,
            el: '.dotts-pagination',
            type: 'custom',
            renderCustom: function(swiper, current, total) {
                //   console.log(current);//1 2 3 4

                // 1、分页器激活样式的改变---给自己添加激活样式并将兄弟的激活样式移出。
                $('.dotts-pagination').children().eq(current - 1).addClass('dots').siblings().removeClass('dots');

                // 2、分页器点击的时候同时切换轮播图(事件委托)----循环模式slideToLoop--
                $('.dotts-pagination').on('click', 'li', function() {

                    swiperBanner.slideToLoop($(this).index(), 1000, true)
                })
            }
        },
    });
</script>

</html>